<template>
  <div class="ReturnVisitCustomers-container">
    <!-- 栅格 输入框 和按钮 -->
    <el-row class="filterCondition">
      <el-form
        label-width="82px"
        label-position="right"
        ref="formLabelAlign"
        :model="formLabelAlign"
      >
        <el-form-item prop="keywords" label="客户" id="cust">
          <el-input v-model="formLabelAlign.keywords" placeholder="姓名/ID/手机号均可"></el-input>
        </el-form-item>
        <el-form-item label="层级" v-show="showCengJi">
          <el-select v-model="formLabelAlign.scopeOf" id="scopeOf" placeholder>
            <el-option label="所有" value></el-option>
            <el-option label="分公司" value="fenGS" v-show="showCengJiList.fenGS"></el-option>
            <el-option label="区域" value="quyu" v-show="showCengJiList.quyu"></el-option>
            <el-option label="部门" value="bumen" v-show="showCengJiList.bumen"></el-option>
            <el-option label="顾问" value="guwen" v-show="showCengJiList.guwen"></el-option>
          </el-select>
          <el-input v-model="formLabelAlign.searchValue" class="yaosile" id="addThing"></el-input>
        </el-form-item>
        <el-form-item label="回访状态">
          <el-select v-model="formLabelAlign.accessStatus" placeholder>
            <el-option label="所有" value></el-option>
            <el-option label="未回访" value="未回访"></el-option>
            <el-option label="未接听" value="未接听"></el-option>
            <el-option label="有异议" value="有异议"></el-option>
            <el-option label="处理完成" value="处理完成"></el-option>
            <!-- <el-option label="重复记录" value="重复记录"></el-option> -->
            <!-- <el-option label="待首次回访" value="待首次回访"></el-option>
            <el-option label="首访未接通" value="首访未接通"></el-option>
            <el-option label="待销售部处理" value="待销售部处理"></el-option>
            <el-option label="待合规部再访" value="待合规部再访"></el-option>
            <el-option label="结束回访" value="结束回访"></el-option> -->
          </el-select>
        </el-form-item>

        <el-form-item label="星级">
          <el-select v-model="formLabelAlign.level" placeholder>
            <el-option label="不限" value=""></el-option>
            <el-option label="0星" value="0"></el-option>
            <el-option label="1星" value="1"></el-option>
            <el-option label="2星" value="2"></el-option>
            <el-option label="2+星" value="3"></el-option>
            <el-option label="3星" value="4"></el-option>
            <el-option label="4星" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="满意度">
          <el-select v-model="formLabelAlign.scoring" placeholder>
            <el-option label="不限" value></el-option>
            <el-option label="非常满意" value="非常满意"></el-option>
            <el-option label="满意" value="满意"></el-option>
            <el-option label="不满意" value="不满意"></el-option>
            <el-option label="非常不满意" value="非常不满意"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-select
            v-model="formLabelAlign.dayType"
            id="time"
            @change="holderQuJian"
            placeholder="时间"
          >
            <el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="value1" label="时间区间" v-show="isShow">
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item class="BTN">
          <el-button style="background-color:#c73e3a;color:#fff" @click="checkCus" class="check">查询</el-button>
          <el-button
            style="background-color:	#00CDCD;color:#fff"
            @click="excelDoor"
            v-show="ShowJJedit"
            class="check"
          >导出</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- table -->
    <el-table :data="tableData" style="width: 100%" >
      <el-table-column prop="customerName" label="客户" align="center" width="85"></el-table-column>
      <el-table-column prop="userName" label="所属顾问" align="center" width="70"></el-table-column>
      <el-table-column label="归属" width="200" align="center">
        <template slot-scope="scope">
          <p
            class="ell"
          >{{ scope.row.departmentName2 }}{{scope.row.departmentName3 | panKong}}{{scope.row.departmentName4 |panKong}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="doorTime" label="上门时间" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.doorTime | formatTime }}</template>
      </el-table-column>
      <el-table-column label="星级" align="center">
        <template slot-scope="scope">{{scope.row.level | mylevel}}</template>
      </el-table-column>
      <el-table-column label="客户资质" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
            <div style="width:200px;" slot="content">{{scope.row.remarks}}</div>
            <p class="ell note" style="margin:0">{{scope.row.remarks}}</p>
          </el-tooltip>
        </template>
      </el-table-column>
       <el-table-column prop="explains" label="未签约说明" align="content" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">{{scope.row.content}}</div>
            <p
              style="white-space: nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;margin:0 "
            >{{scope.row.content}}</p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="accessStatus" label="回访状态" align="center"></el-table-column>
      <el-table-column label="回访记录" width="400" align="center">
        <template slot-scope="scope">
          <!-- <p
            class="yijian"
            v-for="(item,index) in scope.row.returnNoteList"
            :key="index"
            v-if="index<3"
            style="line-height: 18px;"
          >{{scope.row.returnNoteList[index].content}}</p>-->
          <p
            class="ell"
            v-for="(item,index) in scope.row.returnNoteList"
            :key="index"
            :v-if="index<5"
            v-bind:style="{'color': item.colour? 'red':'#606266'}"
          >
            &nbsp;
            <span>{{++index}}--{{item.createDate |formatTime }}--{{item.userName}}</span>
            --{{item.content}}
          </p>
        </template>
      </el-table-column>

      <el-table-column prop="scoring" label="满意度" align="center"></el-table-column>
      <!-- <el-table-column label="客户意见" align="center">
        <template slot-scope="scope">
            <p class="yijian" style="line-height: 18px;" >{{scope.row.feedback}}</p>
        </template>
      </el-table-column>-->
      <el-table-column prop="explains" label="说明" align="center" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="explains">{{scope.row.explains}}</div>
            <p
              style="white-space: nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;margin:0 "
            >{{scope.row.explains}}</p>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="processingResult" label="处理结果" align="center" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">{{scope.row.processingResult}}</div>
            <p
              style="white-space: nowrap;overflow:hidden;text-overflow:ellipsis;width: 100px;margin:0"
            >{{scope.row.processingResult}}</p>
          </el-tooltip>
        </template>
      </el-table-column> -->
      <el-table-column label="回访时间" align="center">
        <template slot-scope="scope">{{ scope.row.updateTime | formatTime }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center" v-if="this.HiddenForGuWen">
        <template slot-scope="scope">
          <el-button
            size="mini"
            v-show="ShowHFedit"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
          >回访编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageConfig.currentPage"
      :page-sizes="[10, 20 ,50, 100]"
      :page-size="pageConfig.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageConfig.total"
    ></el-pagination>
    <!-- 弹出框 -->
  </div>
</template>

<script>
// 导入时间戳
import moment from "moment";
export default {
  name: "ReturnVisitCustomers",
  // 数据
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      ShowCity: false,
      showCengJi: false,
      currentUser: {
        currentName: "",
        currentId: "",
        currentLevel: "",
        currentPhone: ""
      },
      //控制层级显示的值
      showCengJiList: {
        fenGS: true,
        quyu: true,
        bumen: true,
        guwen: true
      },
      value1: "", //未分割的完整版时间区间
      isShow: false, //时间区间隐藏状态
      // ShowforYeWu:false,
      // ShowforYWDHF:true, //业务待处理时显示
      ShowHFedit: false, //回访编辑
      ShowJJedit: false, //客户进件
      ShowNote: false, //详情弹窗的显示
      HiddenForGuWen: true, //详情弹窗的显示
      //页码参数
      pageConfig: {
        currentPage: 1, //当前页
        pageSize: 10, //当前单页数据条数
        total: 0 //请求到的数据总条数
      },
      //时间选择生成内容
      timeList: [
        // { id: "", name: "不限" },
        { id: "today", name: "今日" },
        { id: "yestoday", name: "昨日" },
        { id: "sevenDay", name: "最近七天" },
        { id: "tomonth", name: "本月" },
        { id: "yesmonth", name: "上月" },
        { id: "customize", name: "自定义" }
      ],
      //客户筛选区域数据
      formLabelAlign: {
        level:"",
        keywords: "", //	姓名或ID
        scopeOf: "", //	层级
        searchValue: "", //	层级输入框
        accessStatus: "", //	回访状态
        scoring: "", //	满意度
        time: "", //	消耗时间
        timeType: "", //时间类型
        dayType: "tomonth", //默认本月
        beginTime: "", //开始时间
        endTime: "", //	结束时间
        pageSize: "", //分页大小
        currentPage: "" //	当前页码
      },
      formLabelWidth: "180px",
      tableData: [], // 回访客户表格数据
      DetailtableData: []
    };
  },
  methods: {
    //获取回访客户 List的方法
    getCusList() {
      this.$axios
        .get(
          `/spider/ReturnTable/homeVisit?userId=${this.currentUser.currentid}&keywords=${this.formLabelAlign.keywords}&scoring=${this.formLabelAlign.scoring}&accessStatus=${this.formLabelAlign.accessStatus}&scopeOf=${this.formLabelAlign.scopeOf}&searchValue=${this.formLabelAlign.searchValue}&dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}&currentPage=${this.pageConfig.currentPage}&pageSize=${this.pageConfig.pageSize}&level=${this.formLabelAlign.level}`
        )
        .then(res => {
          console.log(res);
          if (res.data.messageModel.messageText == "成功!") {
            this.tableData = res.data.dataModel.list;
            this.pageConfig.total = res.data.dataModel.total;
          } else {
            this.$message.error("获取回访用户失败/(ㄒoㄒ)/~~");
            this.tableData = [];
            this.pageConfig.total = 0;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //清空所有筛选条件的方法
    clearAllCheck() {
      for (let i = 0; i < this.formLabelAlign.length; i++) {
        this.formLabelAlign.formLabelAlign[i] = "";
      }
      this.value1 = ""; //未分割的完整版时间区间
    },
    //判断时间区间是否隐藏
    holderQuJian(vId) {
      let obj = {};
      obj = this.timeList.find(item => {
        //这里的fenselectList就是上面遍历的数据源
        return item.id === vId; //筛选出匹配数据
      });
      // console.log(obj.name);
      if (obj.id == "customize") {
        this.isShow = true;
      } else {
        this.isShow = false;
        this.value1 = "";
      }
    },
    //分页的方法
    handleSizeChange(val) {
      // console.log(val);
      if (this.pageConfig.currentPage != 1) {
        this.pageConfig.currentPage = 1;
        this.pageConfig.pageSize = val;
        this.getCusList();
      } else {
        this.pageConfig.pageSize = val;
        this.getCusList();
      }
    },
    handleCurrentChange(val) {
      this.pageConfig.currentPage = val;
      this.getCusList();
      // }
    },
    //查询
    checkCus() {
      if (this.value1 != "" && this.formLabelAlign.dayType == "customize") {
        this.formLabelAlign.beginTime = this.value1[0];
        this.formLabelAlign.endTime = this.value1[1];
        if (this.formLabelAlign.beginTime == this.formLabelAlign.endTime) {
          this.formLabelAlign.beginTime =
            this.formLabelAlign.beginTime + " " + "00:00:00";
          this.formLabelAlign.endTime =
            this.formLabelAlign.endTime + " " + "23:59:59";
        }
      } else {
        this.formLabelAlign.beginTime = "";
        this.formLabelAlign.endTime = "";
      }
      if (this.currentUser.currentLevel <= 5) {
        if (this.formLabelAlign.accessStatus == "待销售部处理") {
          this.ShowforYWDHF = true;
        } else {
          this.ShowforYWDHF = false;
        }
      }
      this.$axios
        .get(
          `/spider/ReturnTable/homeVisit?userId=${this.currentUser.currentid}&keywords=${this.formLabelAlign.keywords}&scoring=${this.formLabelAlign.scoring}&accessStatus=${this.formLabelAlign.accessStatus}&scopeOf=${this.formLabelAlign.scopeOf}&searchValue=${this.formLabelAlign.searchValue}&dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}&pageSize=${this.pageConfig.pageSize}&currentPage=${this.pageConfig.currentPage}&level=${this.formLabelAlign.level}`
        )
        .then(res => {
            console.log(res)
          if (res.data.messageModel.code == 0) {
            if (res.data.dataModel.total == 0) {
              this.$message("抱歉，没有找到符合搜索条件的数据");
              this.clearAllCheck();
              this.tableData = [];
              this.pageConfig.total = res.data.dataModel.total
              return false;
            }
            this.$message.success(
              "根据您的搜索条件，已为您找到以下数据(#^.^#)"
            );
            this.tableData = res.data.dataModel.list;
            this.pageConfig.total = res.data.dataModel.total;
            // this.clearAllCheck();
          } else {
            this.$message.error(res.data.messageModel.messageText);
            this.pageConfig.total = 0;
            this.clearAllCheck();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //导出表格
    excelDoor() {
      this.$axios({
        method: "post",
        // url: 'http://139.196.29.59//spider/ReturnTable/excelDoor',//这个是请求的地址 临时！！！！
        url: "https://www.duodaiwang.com//spider/ReturnTable/excelDoor", //正式上线请求的地址！！！！
        params: {
          //这个是请求的参数
          userId: this.currentUser.currentid,
          keywords: this.formLabelAlign.keywords,
          scoring: this.formLabelAlign.scoring,
          accessStatus: this.formLabelAlign.accessStatus,
          scopeOf: this.formLabelAlign.scopeOf,
          searchValue: this.formLabelAlign.searchValue,
          dayType: this.formLabelAlign.dayType,
          beginTime: this.formLabelAlign.beginTime,
          endTime: this.formLabelAlign.endTime,
          currentPage: this.pageConfig.currentPage,
          pageSize: this.pageConfig.pageSize
        },
        responseType: "blob"
      })
        .then(res => {
          console.log(res.data);
          const link = document.createElement("a");
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          let time = moment(new Date()).format("YYYY-MM-DD ");
          link.setAttribute(
            "download",
            this.currentUser.currentName + time + "回访客户数据" + ".xls"
          );
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(error => {
          console.log(error);
        });
      // this.$axios.post(
      //   `/spider/ReturnTable/excelDoor?userId=${this.currentUser.currentid}&keywords=${this.formLabelAlign.keywords}&scoring=${this.formLabelAlign.scoring}&accessStatus=${this.formLabelAlign.accessStatus}&scopeOf=${this.formLabelAlign.scopeOf}&searchValue=${this.formLabelAlign.searchValue}&dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}&currentPage=${this.pageConfig.currentPage}&pageSize=${this.pageConfig.pageSize}`,
      //   {
      //     'responseType':'blob'    // 设置相应的数据类型为一个包含二进制数据的Blob对象，必须设置
      //   },
      // ).then(res=>{
      //   // const link = document.createElement('a')
      //   // let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
      //   // link.style.display = 'none'
      //   // link.href = URL.createObjectURL(blob);
      //   // let time = moment(new Date()).format("YYYY-MM-DD ")
      //   // link.setAttribute('download', this.currentUser.currentName + time + "回访客户数据" +'.xls')
      //   // document.body.appendChild(link)
      //   // link.click()
      //   // document.body.removeChild(link)
      //   console.log(res.data);
      //   var blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
      //   var downloadElement = document.createElement('a');
      //   downloadElement.style.display = 'none'   // 新建一个DOM节点
      //   var href = window.URL.createObjectURL(blob);           // 创建下载的链接
      //   downloadElement.href = href;
      //   downloadElement.download = '测试列表.xls';          // 下载后文件名
      //   document.body.appendChild(downloadElement);            // 将新增的节点挂载到页面上
      //   downloadElement.click();                               // 点击下载
      //   document.body.removeChild(downloadElement);           // 下载完成移除元素
      //   window.URL.revokeObjectURL(href);                     // 释放掉blob对象
      // })
    },
    //编辑
    handleEdit(index, row) {
      // 编程式导航到回访详情
      this.$router.push({
        path: "/HomeCustomerEdit",
        query: { ReVibillId: row.doorId }
      });
      window.sessionStorage.setItem("HomeCustomerEdit", row.doorId);
    },
  },
  // 本地过滤器
  filters: {
    mylevel(val) {
      switch (val) {
        case 1:
          return "1星"
        case 2:
          return "2星"
        case 3:
          return "2星+"
        case 4:
          return "3星"      
        default:
          return "4星"
      }
    },
    formatTime(value) {
      if (value == null) {
        return "";
      }
      //  return moment(value).format("YYYY-MM-DD HH:mm:ss");
      return moment(value).format("YYYY-MM-DD");
    },
    panKong(val) {
      if (val != null && val != "") {
        return "--" + val;
      } else {
        return "";
      }
    }
  },
  created() {
    this.currentUser.currentName = window.sessionStorage.getItem("name");
    this.currentUser.currentid = window.sessionStorage.getItem("id");
    this.currentUser.currentLevel = window.sessionStorage.getItem("userLevel");
    // console.log(Date.now());
    if (
      this.currentUser.currentLevel == 0 ||
      this.currentUser.currentLevel == 17
    ) {
      this.ShowHFedit = true;
      this.showCengJi = true;
    } else if (this.currentUser.currentLevel == 2) {
      //分公司负责人
      this.showCengJi = true;
      this.showCengJiList.fenGS = false;
    } else if (this.currentUser.currentLevel == 3) {
      //区域负责人
      this.showCengJi = true;
      this.showCengJiList.fenGS = false;
      this.showCengJiList.quyu = false;
    } else if (this.currentUser.currentLevel == 4) {
      //部门负责人
      this.showCengJi = true;
      this.showCengJiList.fenGS = false;
      this.showCengJiList.quyu = false;
      this.showCengJiList.bumen = false;
    } else {
      this.showCengJi = false;
      this.HiddenForGuWen = false;
    }

    if (this.currentUser.currentLevel < 5) {
      // this.ShowforYeWu = false;
      this.ShowHFedit = true;
      this.formLabelAlign.accessStatus = "有异议";
    } else {
      // this.ShowforYeWu = true;
      this.ShowHFedit = true;
      this.formLabelAlign.accessStatus = "有异议";
    }
    if (this.currentUser.currentLevel == 17) {
      this.ShowJJedit = true;
      this.formLabelAlign.accessStatus = "未回访";
    }
    this.getCusList();
  },
  activated() {
    this.checkCus();
  }
};
</script>

<style lang='scss'>
.ReturnVisitCustomers-container {
  .el-dialog {
    // width: 35%;
    #dateOfBirth {
      /deep/.el-input__inner {
        padding-left: 30px !important;
      }
    }
    .el-form-item {
      // margin-top: 0;
      /deep/.el-form-item__label {
        width: 150px !important;
      }
      /deep/.el-form-item__content {
        margin-left: 150px !important;
      }
    }
    .el-table {
      height: 230px;
      // .el-table__body-wrapper {
      //   height: auto;
      // }
    }
  }

  //突出隔行的颜色差异
  .el-table {
    font-size: 12px;
    th {
      padding: 0;
    }
    .warning-row {
      background: #fff;
    }
    .success-row {
      background: #d3d3d3;
    }
    td {
      padding: 0;
      //   border-bottom: 1px solid rgb(211, 205, 205);
    }
    .el-button--mini {
      //   border: 0;
      padding: 2px 15px;
      margin: 5px 0;
      // background: rgba(255,255,255,0.01);
    }
    .el-button.JinJianBTN {
      //   border: 0;
      padding: 2px 15px;
      margin: 5px 0;
      color: #fff;
      background-color: #00cdcd;
    }
    .toEdit:hover {
      color: skyblue;
    }
    .grid-content .note {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      // line-height: .9;
      margin: 0;
    }
  }
  .el-form-item.BTN {
    /deep/.el-form-item__content {
      margin-left: 20px !important;
    }
  }
  input.el-input__inner {
    width: 170px;
    height: 32px;
    padding-left: 10px;
  }

  // 时间分类框样式
  input.el-input__inner#kinds,
  input.el-input__inner#scopeOf,
  input.el-input__inner#addThing,
  /deep/input.el-input__inner#time {
    width: 85px;
    padding-left: 7px;
    height: 32px !important;
  }
  .yaosile {
    width: 85px;
  }
  // 日期选择器
  daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 240px;
    height: 36px;
    vertical-align: middle;
    .el-date-editor .el-range__icon {
      line-height: 27px;
    }
    .el-date-editor .el-range-separator {
      width: 5%;
    }
    /deep/.block,
    #block {
      //   border: none !important;
      /deep/.el-date-editor--daterange {
        width: 240px !important;
      }
    }
  }
  .el-form-item {
    display: inline-block;
    margin: 3px 0 3px 10px;
  }
  .el-form-item:nth-child(n + 6) {
    margin-top: 0;
  }
  .el-select.time {
    margin-left: 20px;
  }
  .el-input--suffix .el-input__inner.fanwei {
    padding-right: 30px;
    width: 30px;
  }
  .filterCondition {
    background-color: #fff;
    margin-bottom: 20px;
  }
  .check {
    margin-left: 22px;
    padding: 8px 20px;
  }
  .ell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }
  //分页框样式设置（避免页面被覆盖）
  .el-pagination .el-input__inner {
    width: 100px;
  }
}
</style>